<!-- 提現記錄 -->
<template>
	<!-- 記錄卡片 -->
	<view class="wallet-log-box u-p-b-30">
		<view class="log-list" v-for="item in withdrawLog" :key="item.id">

			<view class="status-box item  u-flex u-col-center u-row-between">
				<view class="item-title">申請狀態</view>
				<view class="status-text" :style="{ color: stausMap[item.status] }">{{ item.status_text }}</view>
			</view>
			<view class="time-box item  u-flex u-col-center u-row-between">
				<text class="item-title">賬戶信息</text>
				<view class="time u-ellipsis-1">{{ item.apply_name }}</view>
			</view>

			<view class="time-box item  u-flex u-col-center u-row-between">
				<text class="item-title">申請時間</text>
				<view class="time">{{ $u.timeFormat(item.createtime, 'yyyy.mm.dd hh:MM:ss') }}</view>
			</view>
			<view class="time-box item  u-flex u-col-center u-row-between" style="float:right" v-if="item.status==0">
				<button class="u-reset-button save-btn" @tap="cancel(item.id)">撤销申请</button>
			</view>
		</view>
		<!-- 更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		<!-- 空置頁 -->
		<shopro-empty v-if="isEmpty" marginTop="300rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'"
			tipText="暫無數據~"></shopro-empty>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				withdrawLog: [],
				loadStatus: 'loadmore', //loadmore-加載前的狀態，loading-加載中的狀態，nomore-沒有更多的狀態
				currentPage: 1,
				lastPage: 1,
				isEmpty: false,
				stausMap: {
					0: '#999',
					1: '#EFAF41',
					2: '#70C140',
					'-1': '#ED5B56'
				}
			};
		},
		computed: {},
		filters: {
			applyInfoFilter: function(value) {
				if (!value) return '-';
				return Object.values(value).join(' | ');
			}
		},
		onLoad() {
			this.getLog();
		},
		// 觸底加載更多
		onReachBottom() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getLog();
			}
		},
		methods: {
			// 確認提交表單
			cancel(id) {
				let that =this;
				that.$http('money.transferCancel', {
					id: id
				}).then(res => {
					if (res.code === 1) {
						this.$u.toast('撤销成功');
						this.currentPage=1;
						// this.getLog()
						window.location.reload()
					}
				});
			},
			getLog() {
				let that = this;
				that.loadStatus = 'loading';
				that.$http('money.transferLog', {
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						that.withdrawLog = [...that.withdrawLog, ...res.data.data];
						that.isEmpty = !that.withdrawLog.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.save-btn {
		margin-bottom:2px;
		width: 150rpx;
		height: 58rpx;
		line-height: 58rpx;
		background: linear-gradient(-90deg, #a36fff, #5336ff);
		// box-shadow: 0px 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34);
		border-radius: 43rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #ffffff;
	}

	// 記錄卡片
	.log-list {
		min-height: 213rpx;
		background: #ffffff;
		margin-bottom: 10rpx;
		padding-bottom: 10rpx;

		.head {
			padding: 0 35rpx;
			height: 80rpx;
			border-bottom: 1rpx solid #eee;
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}

			.num {
				font-size: 28rpx;
				font-weight: 500;
				color: #7063d2;
			}
		}

		.item {
			padding: 0 30rpx 10rpx;

			.item-icon {
				color: #c0c0c0;
				font-size: 36rpx;
				margin-right: 8rpx;
			}

			.item-title {
				width: 180rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}

			.status-text {
				font-size: 24rpx;
				font-weight: 500;
				color: #05c3a1;
			}

			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}
		}
	}
</style>